import React, { PureComponent } from 'react';
import { FrownOutlined } from '@ant-design/icons';
import { formatMessage } from 'umi';

class Index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch = () => {
    this.setState({ hasError: true });
  };

  render() {
    const { children } = this.props;

    const { hasError } = this.state;

    if (hasError) {
      return (
        <div style={{ fontSize: 18, textAlign: 'center' }}>
          <FrownOutlined />
          &nbsp;
          {formatMessage({ id: '发生错误' })}
        </div>
      );
    }
    return children;
  }
}

Index.displayName = 'ErrorBoundary';
export default Index;
